<template>
  <view>
    <view>
      <swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"
        indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#3CB371">
        <swiper-item v-for="item in imgs" :key="item">
          <image :src="item" alt="" mode="widthFix" style="width: 100%;" />
        </swiper-item>
      </swiper>
    </view>
    <view style="margin: 10px">
      <view style="padding: 5px;background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;">
        <uni-icons type="sound" size="20"></uni-icons>
        <view>{{ notice }}</view>
      </view>
    </view>
    <view style="background-color: white; margin: 5px 0; border-radius: 10px; padding: 10px;">
      <uni-row>
        <uni-col :span="6">
          <navigator url="/pages/fault/fault" open-type="navigate">
            <view class="grid-item-box">
              <image mode="widthFix" style="width: 50%;" src="../../static/icon/项目-高亮.png"></image>
              <text style="font-size: 13px; margin-top: 5px;">故障报修</text>
            </view>
          </navigator>
        </uni-col>
        <uni-col :span="6">
          <navigator url="/pages/HazardChecking/HazardChecking" open-type="navigate">
            <view class="grid-item-box">
              <image mode="widthFix" style="width: 50%;" src="../../static/icon/项目-高亮.png"></image>
              <text style="font-size: 13px; margin-top: 5px;">隐患排查</text>
            </view>
          </navigator>
        </uni-col>
        <uni-col :span="6">
          <navigator url="/pages/SafetyChecking/SafetyChecking" open-type="navigate">
            <view class="grid-item-box">
              <image mode="widthFix" style="width: 50%;" src="../../static/icon/项目-高亮.png"></image>
              <text style="font-size: 13px; margin-top: 5px;">安全检查</text>
            </view>
          </navigator>
        </uni-col>
        <uni-col :span="6">
          <navigator url="/pages/DailyTest/DailyTest" open-type="navigate">
            <view class="grid-item-box">
              <image mode="widthFix" style="width: 50%;" src="../../static/icon/项目-高亮.png"></image>
              <text style="font-size: 13px; margin-top: 5px;">日常考核</text>
            </view>
          </navigator>
        </uni-col>
		<uni-col :span="6">
		  <navigator url="/pages/Construction/Construction" open-type="navigate">
		    <view class="grid-item-box">
		      <image mode="widthFix" style="width: 50%;" src="../../static/icon/项目-高亮.png"></image>
		      <text style="font-size: 13px; margin-top: 5px;">施工管理</text>
		    </view>
		  </navigator>
		</uni-col>
		<uni-col :span="6">
		  <navigator url="/pages/EmergencyRepair/EmergencyRepair" open-type="navigate">
		    <view class="grid-item-box">
		      <image mode="widthFix" style="width: 50%;" src="../../static/icon/项目-高亮.png"></image>
		      <text style="font-size: 13px; margin-top: 5px;">应急抢修</text>
		    </view>
		  </navigator>
		</uni-col>
      </uni-row>
    </view>
    <view>
      <uni-card>
        <view slot="title" class="card-title">已完成：10-31 15:17</view>
        <view>
          <view class="text-left">内容：UPS</view>
          <view class="text-left">发起人：test</view>
          <view class="text-left">区间：淀山湖大</view>
          <view class="text-left">处理情况：处理完</view>
        </view>
      </uni-card>
    </view>
    <view>
      <uni-card>
        <view slot="title" class="card-title">已完成：10-31 15:17</view>
        <view>
          <view class="text-left">内容：运动</view>
          <view class="text-left">发起人：test</view>
          <view class="text-left">处理情况：处理完</view>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        "https://ts1.cn.mm.bing.net/th/id/R-C.c885d0a1a30903fa542e6b31c09a7d0a?rik=p2QHIys5ISz8BQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50110%2f0941.jpg_wh1200.jpg&ehk=6vFg7p04LJGR2HNc9E9OILVx2%2fvD6gcdn07W%2b%2fjQdPk%3d&risl=&pid=ImgRaw&r=0",
        "https://img.zcool.cn/community/01a3dc58443c14a801219c772d6e90.JPG@3000w_1l_0o_100sh.jpg",
        "https://ts1.cn.mm.bing.net/th/id/R-C.43d6932523f52ebf6a09c7b35172ccd0?rik=s7SqZUakvTx1ug&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50085%2f1506.jpg_wh1200.jpg&ehk=I50HH8F%2b5cUp8F6HAOXZsuqoFUh5gwgANenw5ChlUz4%3d&risl=&pid=ImgRaw&r=0"
      ],
      notices: [
        { content: "上海轨道交通21号线一期工程项目正式开工" },
        { content: "14号线、18号线一期北段12月30日起开通初期运营" },
        { content: "地铁工程建设 三台盾构接续始发" }
      ],
      notice: ''
    }
  },
  onLoad() {
    this.loadNotice()
  },
  methods: {
    loadNotice() {
      let i = 0
      this.notice = this.notices[i++].content
      setInterval(() => {
        this.notice = this.notices[i++].content
        if (i === this.notices.length) {
          i = 0
        }
      }, 5000)
    },
    clickItem(item) {
      console.log(item)
    }
  }
}
</script>

<style>
  .grid-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .custom-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    padding: 20px;
  }

  .card-title {
    background-color: #3CB371;
    color: white;
    font-weight: bold;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .card-content {
    margin-top: 10px;
  }
  .text-left {
    text-align: left;
    margin-right: 1px;
  }
</style>